<template>
    <div class="page-container">
        <!-- 展示图片部分 -->
        <div class="show-img">
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <MenuList :detailData="detailData" />
    </div>

</template>

<script setup>
import axios from '@/api/index'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import MenuList from '@/components/MenuList.vue'


const images = [
    'https://pic.huke88.com/product-make/cover/2019-08-28/78A9E64F-4D60-41A5-CD8D-853686964D21.jpg!/fwfh/1840x1124/quality/80/unsharp/true/format/jpg',
    'https://public.fangzhenxiu.com/course/2023-4/168181603170320230417221325.png?imageView2/2/h/288',
];
const router = useRouter()

let detailData = ref([]);

onMounted(() => {
    axios.get('/page/detail')
        .then((res) => {
            // console.log(res);

            detailData.value = res.data.data;
            // console.log(detailData.value, '11');

        })
        .catch((err) => {
            console.log(err);
        })
});
// console.log(detailData.value, '22');
</script>

<style lang="less" scoped>
.page-container {
    width: 100vw;
    height: 100vh;

    .show-img {
        height: 4.3rem;

        .van-swipe {
            height: 4.3rem;

            img {
                width: 100%;
            }
        }
    }



}
</style>